<template>
  <div class="contentDiv">
    <a-upload
      :file-list="uploadObj.fileList"
      :multiple="uploadObj.multiple"
      :before-upload="beforeUpload"
      @remove="handleRemove"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        上传文件
      </a-button>

      <template #iconRender><folder-open-outlined /></template>
    </a-upload>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  getCurrentInstance,
  inject,
  defineEmits,
  defineProps,
  reactive,
  toRefs,
} from "vue";
const { proxy } = getCurrentInstance();

const emit = defineEmits(["uploadFileFn"]);

//接收父组件
const props = defineProps({
  uploadObjData: Object,
});
const state=reactive(props)
const uploadObj = state.uploadObjData
const handleRemove = (file) => {
  const index = uploadObj.fileList.indexOf(file);
  const newFileList = uploadObj.fileList.slice();
  newFileList.splice(index, 1);
  uploadObj.fileList = newFileList;
  emit("uploadFileFn", uploadObj.fileList);
  if (uploadObj.fileList.length == 0) {
    uploadObj.uploadFlag = false;
  }
};

const beforeUpload = (file) => {
  uploadObj.uploadSpinning = true;
  uploadObj.uploadFlag = true;
  proxy.$globalFun
    .ossUploadUrl(file, file.name, file.uid, "packageId",uploadObj.dir)
    .then((obj) => {
      obj.uid = obj.id;
      obj.status = "done";
      uploadObj.fileList.push(obj);
      emit("uploadFileFn", uploadObj.fileList);
      uploadObj.uploadSpinning= false;
    });

  return false;
};
</script>

<style lang="scss" scoped></style>
